<template>
    <div class="about">
              <el-row>
            <el-col :span="3">&nbsp;</el-col>
            <el-col :span="3"><el-input v-model="id"   size="mini" placeholder="广告id"></el-input></el-col>
            <el-col :span="3" ><el-button type="primary" size="mini"  @click="search" icon="el-icon-search">搜索</el-button></el-col>
            <el-col :span="3"><el-button type="primary" size="mini" @click="addImg()" icon="el-icon-circle-plus">添加</el-button></el-col>
            <el-col :span="3"><el-button type="primary" size="mini" @click="flush()"  icon="el-icon-search">刷新</el-button></el-col>
        </el-row>
    <el-table
        :data="tableData"
        style="width: 100%"
        height="400"
        stripe>
        <el-table-column
            prop="id"
            label="广告id"
            width="180">
        </el-table-column>
        <el-table-column 
            prop="name"
            label="广告位置"
            width="180">
        </el-table-column>
        <el-table-column
            prop="descrition"
            label="描述"
            sortable>
        </el-table-column>
     <el-table-column label="操作" width="200px" fixed="right">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button> 
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
    </el-table>
     <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[2,3,5,10,100, 200, 300, 400]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

    <!--添加弹出框-->
            <el-dialog title="添加" :visible.sync="addFormVisible">
                <el-form :model="form">
                    <el-form-item label="广告位置" >
                        <el-input v-model="form.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="描述" >
                        <el-input v-model="form.descrition" autocomplete="off"></el-input>
                    </el-form-item>                                
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="addFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="add">确 定</el-button>
                </div>
              </el-dialog>
    </div>
</template>
 <script>
    const axios = require("axios");
    export default {
      data() {
        return {
          tableData: [],
          currentPage:1,//当前页面，默认1
                pageSize:5,//每页显示条数
                total:100,//分页总数量，默认值随便写，初始化时赋予新值
                name:'',//查询功能
                id:'',
                dialogFormVisible:false,
                addFormVisible:false,
                imageUrl:'',
                form:{},
                position:'',
                positionList:[]
               
        }
    }, 
      created:function(){
        this.loadData();
            },
    methods: {
        loadData(){
          this.$http.post("/api/mks/advertisePosition/queryAllByParam?pageNo="+this.currentPage+"&pageSize="+this.pageSize,
          { id:this.id }).then((response) => {
             if(response.data.code==2000){
               console.log(response.data)
                this.tableData = response.data.data.list;
                this.total = response.data.data.total;
              } 
        })        
    },
                search(){
                       this.loadData();
                 },
                 flush(){
                     //刷新当前页
                     location.reload();
                 },
    //处理删除（ 汽车删除）
                handleDelete(index, row) {
                    console.log(index, row);
                   var _this=this;
                    //确认弹框
                    this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        //执行删除
                        this.$http.delete('/api/mks/advertisePosition/deleteById?id='+row.id)
                            .then(function (response) {
                                //判断删除是否成功
                                 if(response.data.code==2000){
                                     //提示
                                     _this.$message({
                                         type: 'success',
                                         message: '删除成功!'
                                     });
                                     //重新加载数据
                                     _this.loadData();
                                 }else {
                                     _this.$message.error(response.data.message);
                                 }
                            })
                            .catch(function (error) {
                                //失败处理
                                console.log(error);
                                _this.$message.error('删除失败!');
                            });
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                },
                

     handleSizeChange(val) {
                    // console.log(`每页 ${val} 条`);
                    this.pageSize=val;
                    this.loadData();
       },
     handleCurrentChange(val) {
              // console.log(`当前页: ${val}`);
              this.currentPage=val;
              this.loadData();
      },
                 //图片上传成功后
                 handleAvatarSuccess:function(res, file) {
                     //图片回显
                     this.imageUrl = URL.createObjectURL(file.raw);
                  //   alert(file.response);
                    // alert(JSON.stringify(file.response));
                     this.form.pic=file.response.ossFileUrlBoot;
                     // this.form.fileName=file.response.oldFileName;
                     // this.form.filePath=file.response.newFilePath;
                 },
                 //处理编辑（弹出部门更新对话框）
            handleEdit(index, row) {
                console.log(index, row);
                //显示编辑需要的
                this.isShow=true;
                this.form=row;
                //更新显示名称
                this.title="用户更新";
                //对话框显示
                this.addFormVisible=true;
                this.positionLists();
            },
            addImg(){
                    this.form={};
                    this.addFormVisible=true;
                    this.positionLists();
            },
            positionLists(){
                var _this=this;
                this.$http.post('/api/mks/advertisePosition/queryAll')
                            .then(function (response) {
                                //判断更新是否成功
                                 if(response.data.code==2000){
                                    _this.positionList=response.data.data;
                                 }
                            })
                            .catch(function (error) {
                                //失败处理
                                console.log(error);
                            });
            },
                 add(){
                     console.log(this.form.id);
                   var  url ='/api/mks/advertisePosition/update?id='+this.form.id;
                if(this.form.id==''||this.form.id==null){
                    url="/api/mks/advertisePosition/insert";
                };
                   var _this =this;
                  this.$http.post(url,this.form).then((response) => {
                                                 console.log(response);
                                              if(response.data.code==2000){
                                                  //提示成功
                                                  _this.$message({
                                                      type: 'success',
                                                      message: '恭喜你，这是一条成功消息!'
                                                  });
                                                  //关闭弹框
                                                  _this.addFormVisible=false;
                                                  //重新加载数据
                                                  _this.loadData();
                                              }
                                }) 
                 },
  },filters: {
        //时间格式处理
            dateFilter: function (data, format = "") {
                var dt = new Date(data);
                var y = dt.getFullYear();
                var m = (dt.getMonth()+1).toString().padStart(2,"0");
                var d = dt.getDate().toString().padStart(2,"0");
                var h = dt.getHours().toString().padStart(2,"0");
                var mm = dt.getMinutes().toString().padStart(2,"0");
                var s = dt.getSeconds().toString().padStart(2,"0");
                if (format.toLocaleLowerCase() === "yyyy-mm-dd" ||
                    format.toLocaleLowerCase() === "") {
                    return `${y}-${m}-${d}`;
                } else if (format.toLocaleLowerCase() === "yyyy/mm/dd") {
                    return `${y}/${m}/${d}`;
                } else if (format.toLocaleLowerCase() === "yyyy-mm-dd hh:mm:ss") {
                    return `${y}-${m}-${d} ${h}:${mm}:${s}`;
                } else if (format.toLocaleLowerCase() === "yyyy/mm/dd hh:mm:ss") {
                    return `${y}/${m}/${d} ${h}:${mm}:${s}`;
                } else {
                    return `输入的时间格式有误`;
                }
            }
        }
}
  </script>

  <style >
  .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
        }
        .avatar {
            width: 100px;
            height: 100px;
            display: block;
        }
  </style>
  
 